<template>
    <div class="box">
        <div class="title">{{$t('merchantacclist')}} | {{$t('detls')}}</div>
        <el-button type="primary" icon="el-icon-d-arrow-left" :circle="true" @click="goAway" v-preventReClick></el-button>
        <div class="detBox">
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('mertnam')}}</div>
                    </div>
                </el-col>
                <el-col :span="20">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{merDetForm.merName}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('mertid')}}</div>
                    </div>
                </el-col>
                <el-col :span="20">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{merDetForm.merId}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('accountid')}}</div>
                    </div>
                </el-col>
                <el-col :span="20">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{merDetForm.accId}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('acctype')}}</div>
                    </div>
                </el-col>
                <el-col :span="20">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{merDetForm.accType}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('accbalance')}}</div>
                    </div>
                </el-col>
                <el-col :span="20">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{merDetForm.amt}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <div class="bhead">{{$t('acctsta')}}</div>
                    </div>
                </el-col>
                <el-col :span="20">
                    <div class="grid-content bg-purple-light">
                        <div class="bbody">{{merDetForm.status}}</div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <el-card class="cardBox">
            <el-table border style="width: 100%" :data="merdetMonTab">
                <el-table-column prop="merName" :label="$t('time')">
                </el-table-column>
                <el-table-column prop="accId" :label="$t('typ')" width="160">
                </el-table-column>
                <el-table-column prop="accType" :label="$t('accbalance')">
                </el-table-column>
                <el-table-column prop="amt" :label="$t('flowamount')">
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="meraccdetForm.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="meraccdetForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
export default {
    data () {
        return {
            merDetForm: {},
            total: 0,
            meraccdetForm: {
                pageNum: 1,
                pageSize: 10
            },
            merdetMonTab: []
        }
    },
    methods: {
        goAway () {
            this.$router.go(-1)
        },
        handleSizeChange (newSize) {
            this.meraccdetForm.pageSize = newSize
            // this.getmerAccForm()
        },
        // 监听总页数变化
        handleCurrentChange (newNum) {
            this.meraccdetForm.pageNum = newNum
            // this.getmerAccForm()
        }
    },
    mounted () {
        this.merDetForm = this.$store.state.merchantDet
    }
}
</script>

<style lang="less" scoped>
@deep: ~'>>>';

.box {
    position: relative;
    width: 800px;
    margin: 0 auto;
    .title {
        display: inline-block;
        margin-top: 20px;
        font-size: 18px;
        font-weight: 700;
    }
    .el-row {
        border-bottom: 1px solid #ccc;
    }
    .el-row:last-child {
        border-bottom: none;
    }
    .detBox {
        margin-top: 26px;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        .bhead {
            background: #E4E4E4;
            width: 133px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-right: 1px solid #ccc;
        }
        .bbody {
            background: #fff;
            width: 665px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-right: 1px solid #ccc;
        }
    }
    .el-button {
        position: absolute;
        top: 15px;
        right: 0;
    }
}
.cardBox {
    width: 100%;
    margin-top: 23px;
    @{deep} .el-table {
        font-size: 12px;

        .el-table__header-wrapper {
            background-color: #F2F2F2 !important;
        }
    }
    @{deep} .el-table td, .el-table th {
        height: 40px;
        padding: 0;
    }
    @{deep} .el-table th, .el-table tr {
        background-color: #F2F2F2 !important;
    }
    .el-link {
        font-size: 12px;
        margin-left: 20px;
    }
    .el-pagination {
        margin-top: 40px;
    }
}
</style>
